<template>
    <el-select ref="elSelectTree"
               :value="valueTitle"
               :clearable="clearable"
               :placeholder="placeholder"
               :multiple="multiple"
               @clear="clearHandle"
               @remove-tag="removeTag">
        <el-option label=""
                   value=""
                   class="options">
            <el-tree ref="selectTree"
                    :accordion="accordion"
                    :data="options"
                    :props="props"
                    :node-key="props.value"
                    :default-expanded-keys="defaultExpandedKey"
                    :expand-on-click-node="false"
                    :show-checkbox="multiple"
                    @node-click="handleNodeClick"
                    @check="handleCheckChange"/>
        </el-option>
    </el-select>
</template>

<script>
export default {
    name: "ElTreeSelect",
    props: {
        /* 配置项 */
        props: {
            type: Object,
            default: () =>
            {
                return {
                    value: "id", // ID字段名
                    label: "title", // 显示名称
                    children: "children" // 子级字段名
                };
            }
        },
        /* 选项列表数据(树形结构的对象数组) */
        options: {
            type: Array,
            default: () => { return []; }
        },
        /* 初始值 */
        value: {
            type: String | Array,
            default: () => { return null; }
        },
        /* 可清空选项 */
        clearable: {
            type: Boolean,
            default: () => { return true; }
        },
        /* 自动收起 */
        accordion: {
            type: Boolean,
            default: () => { return false; }
        },
        /* 缺省 */
        placeholder: {
            type: String,
            default: "请选择"
        },
        /* 是否多选 */
        multiple: {
            type: Boolean,
            default: false
        }
    },
    data()
    {
        return {
            valueId: this.value, // 初始值
            valueTitle: "",
            defaultExpandedKey: [],
            removeId: null
        };
    },
    watch: {
        value(newVal, oldVal)
        {
            this.valueId = this.value;
            this.initHandle();
        }
    },
    mounted()
    {
        this.initHandle();
    },
    methods: {
        // 初始化值
        initHandle()
        {
            if (this.valueId)
            {
                setTimeout(() =>
                {
                    // 单选
                    if (!this.multiple)
                    {
                        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]; // 初始化显示
                        this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
                        this.defaultExpandedKey = [this.valueId]; // 设置默认展开
                    }
                    // 多选
                    else
                    {
                        this.$refs.selectTree.setCheckedKeys(this.valueId, true); // 设置默认选中
                        this.valueTitle = this.$refs.selectTree.getCheckedNodes(true).map(item => { return item[this.props.label]; });
                        this.defaultExpandedKey = this.valueId; // 设置默认展开
                    }
                }, 100);
            }
            else
            {
                this.clearHandle();
            }
            this.initScroll();
        },
        // 初始化滚动条
        initScroll()
        {
            this.$nextTick(() =>
            {
                let scrollWrap = document.querySelectorAll(".el-scrollbar .el-select-dropdown__wrap")[0];
                let scrollBar = document.querySelectorAll(".el-scrollbar .el-scrollbar__bar");
                scrollWrap.style.cssText = "margin: 0px; max-height: none; overflow: hidden;";
                scrollBar.forEach((ele) =>
                {
                    ele.style.width = 0;
                });
            });
        },
        // 切换选项
        handleNodeClick(node)
        {
            // 单选
            if (!this.multiple)
            {
                this.valueTitle = node[this.props.label];
                this.valueId = node[this.props.value];
                this.defaultExpandedKey = [];
                this.handleNodeChecked();
                this.$emit("getValue", this.valueId);
                this.$emit("change", this.valueI);
            }
        },
        // 清除选中
        clearHandle()
        {
            this.valueTitle = "";
            this.valueId = null;
            this.defaultExpandedKey = [];
            this.clearSelected();
            this.$emit("getValue", this.valueId);
            this.$emit("change", this.valueI);
        },
        /* 清空选中样式 */
        clearSelected()
        {
            if (this.multiple)
            {
                this.$refs.selectTree.setCheckedKeys([]);
            }
            else
            {
                this.$refs.selectTree.setCurrentKey(null);
            }
        },
        // 选择树失去焦点
        handleNodeChecked()
        {
            this.$refs.elSelectTree.blur();
        },
        // 点击多选框
        handleCheckChange(data, json)
        {
            this.valueId = this.$refs.selectTree.getCheckedKeys(true);
            this.defaultExpandedKey = [];
            this.$emit("getValue", this.valueId);
            this.$emit("change", this.valueId);
        },
        removeTag(tag)
        {
            this.findRemoveId(this.options, tag);
            this.valueId = this.valueId.filter(item => { return item !== this.removeId; });
            this.$emit("getValue", this.valueId);
            this.$emit("change", this.valueI);
        },
        findRemoveId(arr, tag)
        {
            arr.forEach(item =>
            {
                if (item[this.props.label] === tag)
                {
                    this.removeId = item[this.props.value];
                }
                if (item.children && item.children.length > 0)
                {
                    this.findRemoveId(item.children, tag);
                }
            });
        }
    }
};
</script>
<style scoped>
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }
    .el-select-dropdown__item.selected{
        font-weight: normal;
    }
    ul li >>>.el-tree .el-tree-node__content{
        height:auto;
        padding: 0 20px;
    }
    .el-tree-node__label{
        font-weight: normal;
    }
    .el-tree >>>.is-current .el-tree-node__label{
        color: #409EFF;
        font-weight: 700;
    }
    .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
        color:#606266;
        font-weight: normal;
    }

    /* 开发禁用 */
    /* .el-tree-node:focus>.el-tree-node__content{
      background-color:transparent;
      background-color: #f5f7fa;
      color: #c0c4cc;
      cursor: not-allowed;
    }
    .el-tree-node__content:hover{
      background-color: #f5f7fa;
    } */
</style>
